<template>
	<view>
		<view aria-role="tab" class="box_icon">
			<!-- <image class="box_img" src="../../static/shtg.png"></image> -->
			<view class="top_icon">
				<icon class="iconfont">&#xe610;</icon>
			</view>
			<text>{{ordItme.appName}}</text>
			<br>
			<text class="result">您的服务{{ordItme.state==1 ? '已完成' : '进行中'}}</text>
		</view>
		<view class="txtlist">
			<view aria-role="tab">
				<text class="content">服务编号</text>
				<text>{{ordItme.orderNo}}</text>
			</view>
			<view aria-role="tab">
				<text>服务名称</text>
				<text>{{ordItme.orderName}}</text>
			</view>
			<view aria-role="tab">
				<text class="content">服务提交时间</text>
				<text>{{ordItme.serveCtime}}</text>
			</view>
			<view aria-role="tab">
				<text class="content">服务完成时间</text>
				<text>{{ordItme.serveFtime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ordItme:[],
			}
		},
		onLoad(option){
			this.ordData(option.id)
			
		},
		methods: {
			ordData(id){
				uni.showLoading({title:'加载中'});
				this.$request.getForm('/view/trade/view',{id:id}).then(
					res=>{
						this.ordItme = res.data
						uni.hideLoading()
					},
					err=>{
						console.log("返回失败")
					}
				)
			}
		}
	}
</script>

<style>
	.box_icon{
		margin: 24rpx;
		text-align: center;
		font-size: 30rpx;
		padding: 80rpx 0 100rpx 0;
		background-color: #FFFFFF;
		border-radius: 18rpx;
	}
	.box_icon>.box_img{
		position: absolute;
		right: 24rpx;
		top: 24rpx;
		width: 214rpx;
		height: 204rpx;
	}
	.box_icon>text:nth-of-type(1){
		font-size: 34rpx;
		font-weight: 500;
	}
	.top_icon{
		width: 112rpx;
		height: 112rpx;
		background: #06B57A;
		display: block;
		border-radius: 24rpx;
		margin:auto;
		margin-bottom: 20rpx;
	}
	.top_icon>icon{
		color: #fff;
		font-size: 96rpx;
		line-height: 112rpx;
	}
	.result{
		color: #999;
		font-size: 28rpx;
		padding-top: 24rpx;
		display: block;
	}
	.txtlist{
		margin:32rpx 24rpx 0 24rpx;
		background-color: #FFFFFF;
		border-radius: 18rpx;
		padding: 24rpx 24rpx;
	}
	.txtlist>view{
		padding: 16rpx 0;
	}
	.txtlist>view>text{
		display: initial;
	}
	.txtlist>view>text:nth-child(1){
		color: #999;
	}
	.txtlist>view>text:nth-child(2){
		float: right;
	}
</style>
